<template>
    <div class="wraper">
        <swiper :options="swiperOption">
            <!-- slides -->
            <swiper-slide v-for="item in swiperList" :key="item.id">
                <img class="swiper-img" :src="item.imgUrl" alt="">
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
    export default {
        name: 'HomeSwiper',
        data: function () {
            return {
                swiperOption: {
                    pagination: '.swiper-pagination',
                    loop: true
                },
                swiperList: [
                    {
                        id: '0001',
                        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1806/a1/14543f13b0fba602.jpg_750x200_b7e3c759.jpg'
                    },{
                        id: '0002',
                        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1807/c6/44fce1467be17702.jpg_750x200_406f5fc3.jpg'
                    }
                ]
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .wraper >>> .swiper-pagination-bullet-active
        background-color: #fff
    .wraper
        overflow: hidden
        width: 100%
        height: 0
        padding-bottom: 26.67%
        background-color: #eee
        .swiper-img
            width: 100%
</style>